<template>
  <div class="initdialog">
    <el-dialog v-model="initVisible" :show-close="false" width="90%">
      <div id="closer" @click.stop="cal">
        <span>
          <el-icon color="#fff" size="16"><CloseBold /></el-icon>
        </span>
      </div>
      <van-swipe style="height: 480px">
        <van-swipe-item v-for="(item, index) in swiperlist" :key="index">
          <div class="swiperdiv">
            <img :src="item.img" alt="" />
            <span @click="item.callback">{{ $t(item.lang) }}</span>
          </div>
        </van-swipe-item>
      </van-swipe>
    </el-dialog>
  </div>
  <div class="init2dialog">
    <el-dialog fullscreen v-model="initVisible2" :show-close="false">
      <div
        id="bigcloser"
        style="border-bottom: 1px solid #4a4c53; padding-bottom: 15px"
      >
        <strong></strong>
        <h4>
          {{ $t("language.initdialog.init2title") }}
        </h4>
        <span @click="initVisible2 = false">
          <el-icon color="#b5b6c8" size="16"><CloseBold /></el-icon>
        </span>
      </div>
      <div class="input">
        <span> {{ $t("language.initdialog.inputtitle") }}</span>
        <el-select
          v-model="value"
          placeholder="BRL"
          size="large"
          style="width: 200px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="bg">
        <div>
          <dl>
            <dd @click="informcao">
              <div>
                <div>
                  <i>14</i>
                  <strong>off</strong>
                </div>
                <h3>35.00</h3>
                <i>R$ 100.00</i>
                <strong>R$30.00</strong>
              </div>
              <strong>Comprar agora</strong>
            </dd>
            <dd @click="informcao">
              <div>
                <div>
                  <i>14</i>
                  <strong>off</strong>
                </div>
                <h3>35.00</h3>
                <i>R$ 100.00</i>
                <strong>R$30.00</strong>
              </div>
              <strong>Comprar agora</strong>
            </dd>
            <dd @click="informcao">
              <div>
                <div>
                  <i>14</i>
                  <strong>off</strong>
                </div>
                <h3>35.00</h3>
                <i>R$ 100.00</i>
                <strong>R$30.00</strong>
              </div>
              <strong>Comprar agora</strong>
            </dd>
          </dl>
        </div>
      </div>
      <p>{{ $t("language.initdialog.text") }}</p>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, reactive, getCurrentInstance } from "vue";
import { openPage } from "@/utils/common";
const getImg = (url) => {
  return new URL(`../assets/img/${url}`, import.meta.url).href;
};
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
const { proxy } = getCurrentInstance();
let initVisible = ref(true);
let initVisible2 = ref(false);
let cal = () => {
  console.log(5454545);
  initVisible.value = false;
  initVisible2.value = true;
};
let informcao = () => {
  initVisible2.value = false;
  openPage("/informcao");
};
let emit = defineEmits(["openTerouro"]);
let swiperlist = reactive([
  {
    img: getImg("init1.png"),
    lang: "language.initdialog.btn1",
    callback: () => {
      proxy.$openPage("/StarDetail");
      initVisible.value = false;
    },
  },
  {
    img: getImg("init2.png"),
    lang: "language.initdialog.btn2",
    callback: () => {
      emit("openTerouro", true);
      initVisible.value = false;
    },
  },
]);
</script>

<style scoped lang="scss">
.initdialog {
  #closer {
    width: 100%;
    position: absolute;
    @include flex(row, flex-end, center);
    span {
      display: block;
      width: 28px;
      height: 28px;
      @include flex(row, center, center);
      border: 2px solid #fff;
      border-radius: 16px;
    }
  }
  :deep(.van-swipe__indicators) {
    display: none;
  }
  :deep(.el-dialog) {
    padding: 10px !important;
    background-color: transparent !important;
    --el-dialog-bg-color: transparent !important;
  }
  .swiperdiv {
    width: 100%;
    height: 100%;
    @include flex(column, center, center);
    position: relative;
    img {
      width: 260px;
    }
    span {
      display: block;
      margin: 0 auto;
      height: 35px;
      text-align: center;
      line-height: 36px;
      border-radius: 18px;
      padding: 0 20px;
      margin-top: -36px;
      font-size: 14px;
      color: #fff;
      background: #0a906c;
    }
  }
}
.init2dialog {
  :deep(.el-dialog) {
    padding: 10px !important;
    background-color: rgba(49, 53, 62) !important;
    --el-dialog-bg-color: rgba(49, 53, 62) !important;
  }
  #bigcloser {
    width: 100%;
    @include flex(row, flex-end, center);
    strong {
      display: block;
      width: 28px;
      height: 28px;
    }
    h4 {
      flex: 1;
      font-size: 18px;
      color: #fff;
      text-align: center;
    }
    span {
      display: block;
      width: 28px;
      height: 28px;
      @include flex(row, center, center);
      border: 2px solid #b5b6c8;
      border-radius: 16px;
    }
  }
  .input {
    padding-right: 30px;
    @include flex(row, flex-end, center);
    flex-wrap: wrap;
    margin: 20px 0;
    span {
      font-size: 14px;
      color: #fff;
      padding-right: 10px;
      display: block;
      height: 40px;
      line-height: 40px;
    }
    :deep(.el-select__wrapper) {
      background-color: rgb(39, 42, 48) !important;
      box-shadow: none;
      border: 1px solid #4a4c53;
      border-radius: 10px;
    }
  }
  .bg {
    min-width: 88%;
    margin: 0 auto;
    > div {
      width: 100%;
      background: url("@/assets/img/initbg.png") no-repeat;
      background-size: cover;
      height: 420px;
      position: relative;
      @include flex(row, center, center);
      dl {
        padding: 0 10px;
        width: 100vw;
        position: absolute;
        @include flex(row, space-around, center);
        flex-wrap: wrap;
        dd {
          width: 138px;
          height: 100%;
          margin-bottom: 10px;
          > div {
            height: 156px;
            background: url("@/assets/img/initbg2.png") no-repeat;
            background-size: cover;
            padding: 10px 0 0 10px;
            > div {
              @include flex(row, flex-start, center);
              i {
                font-size: 26px;
                color: #f2ff23;
                &::after {
                  content: "%";
                  font-size: 20px;
                  color: #fff;
                  font-style: normal;
                  padding: 0 5px;
                }
              }
              strong {
                font-size: 16px;
                color: #fff;
                font-weight: normal;
              }
            }
            > h3 {
              text-align: center;
              margin: 11px 0;
              font-size: 26px;
              color: #fa6909;
              font-weight: normal;

              text-shadow: #f5e027 0 4px 2px;
            }
            > i {
              font-style: normal;
              text-decoration: line-through;
              color: #fff;
              font-size: 12px;
            }
            > strong {
              display: block;
              font-size: 20px;
              color: #50fcaf;
              text-align: center;
              padding-top: 5px;
            }
          }
          > strong {
            background: url("@/assets/img/initbg3.png");
            display: block;
            @include flex(row, center, center);
            width: 100%;
            height: 34px;
            line-height: 34px;
            text-align: center;
            background-size: 100% 100%;
            line-height: 34px;
            font-size: 17px;
            color: #fff;
            margin-top: 15px;
          }
        }

        dd + dd {
          margin-left: 15px;
        }
      }
    }
  }
  p {
    padding: 0 30px;
    width: 100%;
    font-size: 18px;
    color: #b5b6c8;
    margin-top: 30px;
  }
}
</style>
